<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="nav-tabs">
				<view :class="['tab-item', activeTab === 0 ? 'active' : '']" @click="switchTab(0)">
					我的充电桩
				</view>
				<view :class="['tab-item', activeTab === 1 ? 'active' : '']" @click="switchTab(1)">
					我的收益
				</view>
			</view>
		</view>

		<!-- 我的充电桩内容 -->
		<view v-if="activeTab === 0" class="charging-pile-content">
			<!-- 暂未购买状态 -->
			<view v-if="pileStatus === 'not_purchased'" class="status-card1 not-purchased">
				<view class="status-content">

					<text class="status-title1">暂未购买</text>	
				</view>		
			</view>

			<!-- 预约安装状态 -->
			<view v-else-if="pileStatus === 'appointment'" class="status-card appointment">
				<view class="status-header">
					<view class="status-indicator orange"></view>
					<text class="status-title">预约安装</text>
				</view>
				<view class="pile-info">
					<text class="pile-location">{{ pileData.location }}</text>
					<text class="pile-number">充电桩编号：{{ pileData.number }}</text>
				</view>
				<view class="appointment-info">
					<text class="info-label">预约信息</text>
					<view class="info-item">
						<text class="info-text">请选择预约安装时间</text>
						<uni-icons type="forward" size="16" color="#999"></uni-icons>
					</view>
					<view class="usage-status">
						<text class="usage-label">我的充电桩使用状态</text>
						<text class="usage-value">充电中</text>
					</view>
				</view>
				<button class="action-btn appointment-btn" @click="makeAppointment">预约安装</button>
			</view>

			<!-- 安装中状态 -->
			<view v-else-if="pileStatus === 'installing'" class="status-card installing">
				<view class="status-header">
					<view class="status-indicator orange"></view>
					<text class="status-title">安装中</text>
				</view>
				<view class="pile-info">
					<text class="pile-location">{{ pileData.location }}</text>
					<text class="pile-number">充电桩编号：{{ pileData.number }}</text>
				</view>
				<view class="installation-info">
					<text class="info-label">预约信息</text>
					<view class="info-row">
						<text class="info-text">预约安装时间：{{ pileData.appointmentTime }}</text>
					</view>
					<view class="info-row">
						<text class="info-text">安装师傅：{{ pileData.installer }}</text>
					</view>
					<view class="info-row">
						<text class="info-text">安装师傅电话：{{ pileData.installerPhone }}</text>
					</view>
					<view class="usage-status">
						<text class="usage-label">我的充电桩使用状态</text>
						<text class="usage-value">充电中</text>
					</view>
				</view>
			</view>

			<!-- 安装完成状态 -->
			<view v-else-if="pileStatus === 'completed'" class="status-card completed">
				<view class="status-header">
					<view class="status-indicator green"></view>
					<text class="status-title">安装完成</text>
					<!-- <image class="pile-image" src="@/static/images/bg_charge2(2).png" mode="aspectFit"></image> -->
				</view>
				<view class="pile-info">
					<text class="pile-location">{{ pileData.location }}</text>
					<text class="pile-number">充电桩编号：{{ pileData.number }}</text>
				</view>
				<view class="completion-info">
					<text class="info-label">预约信息</text>
					<view class="info-row">
						<text class="info-text">预计正式运营时间：{{ pileData.operationTime }}</text>
					</view>
					<view class="info-row">
						<text class="info-text">安装时间：{{ pileData.installTime }}</text>
					</view>
					<view class="info-row">
						<text class="info-text">安装师傅：{{ pileData.installer }}</text>
					</view>
					<view class="info-row">
						<text class="info-text">安装师傅电话：{{ pileData.installerPhone }}</text>
					</view>
					<view class="usage-status">
						<text class="usage-label">我的充电桩使用状态</text>
						<text class="usage-value">充电中</text>
					</view>
				</view>
				<button class="action-btn operation-btn" @click="startOperation">正式运营</button>
			</view>

					<!-- 底部促销卡片 -->
			<view   v-if="activeTab === 0" class="promotion-card">
				<view class="promotion-image" ></view>
			</view>
		</view>

		<!-- 我的收益内容 -->
		<view v-else class="earnings-content">
			<!-- 收益头部区域 -->
			<view class="earnings-header">
				<view class="earnings-main">
					<text class="earnings-amount">¥{{ totalEarnings }}</text>
					<text class="earnings-label">累计服务费分成</text>
				</view>
				<!-- <image class="charging-pile-bg" src="@/static/images/bg_charge2(2).png" mode="aspectFit"></image> -->
			</view>
			
			<!-- 邀请奖励区域 -->
			<view class="invite-rewards">
				<view class="section-title">邀请奖励</view>
				<view class="rewards-grid">
					<view class="reward-item" @click="goToRewardList('direct')">
						<view class="reward-amount">¥{{ inviteRewards.amount1 }} <text class="reward-count">({{ inviteRewards.count1 }}人)<image class="invite-icon" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/yaoqing.png" mode="aspectFit"></image></text></view>
						<view class="reward-desc">直接奖励：¥4000 (20人) </view>
						<!-- <view class="reward-arrow"></view> -->
					</view>
					<view class="reward-item" @click="goToRewardList('indirect')">
						<view class="reward-amount">¥{{ inviteRewards.amount2 }} <text class="reward-count">({{ inviteRewards.count2 }}人)<image class="invite-icon" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/yaoqing.png" mode="aspectFit"></image></text></view>
						<view class="reward-desc">间接奖励：¥6000 (50人) </view>
						<!-- <view class="reward-arrow"></view> -->
					</view>
				</view>
			</view>
			
			<!-- 充电桩使用情况 -->
			<view class="usage-stats">
				<view class="section-title">充电桩使用情况</view>
				<view class="stats-grid">
					<view class="stat-item">
						<text class="stat-amount">¥{{ usageStats.todayAmount }}</text>
						<text class="stat-label">昨日：{{ usageStats.todayCount }}次/{{ usageStats.todayDegree }}度电</text>
					</view>
					<view class="stat-item">
						<text class="stat-amount">¥{{ usageStats.totalAmount }}</text>
						<text class="stat-label">累计：{{ usageStats.totalCount }}次/{{ usageStats.totalDegree }}度电</text>
					</view>
				</view>
				
				<!-- 时间筛选 -->
				<view class="time-filter">
					<view :class="['filter-item', timeFilter === 'today' ? 'active' : '']" @click="setTimeFilter('today')">今日</view>
					<view :class="['filter-item', timeFilter === 'yesterday' ? 'active' : '']" @click="setTimeFilter('yesterday')">昨日</view>
					<view :class="['filter-item', timeFilter === 'week' ? 'active' : '']" @click="setTimeFilter('week')">本周</view>
					<view :class="['filter-item', timeFilter === 'month' ? 'active' : '']" @click="setTimeFilter('month')">本月</view>
				</view>
				
				<!-- 充电记录列表 -->
				<view class="charging-records">
					<view v-for="record in chargingRecords" :key="record.id" class="record-item">
						<view class="record-info">
							<text class="record-id">{{ record.id }}</text>
							<text class="record-details">充电情况：{{ record.duration }}/{{ record.degree }}度电</text>
							<text class="record-time">支付时间：{{ record.payTime }}</text>
						</view>
						<text class="record-amount">¥{{ record.amount }}</text>
					</view>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script setup>
import { ref } from 'vue';

// 当前激活的标签页
const activeTab = ref(0);

// 充电桩状态：not_purchased, appointment, installing, completed
const pileStatus = ref('not_purchased');

// 充电桩数据
const pileData = ref({
	location: '新宇创谷A区充电站-1号充电桩',
	number: '0987654321',
	appointmentTime: '2025-09-10 09:00',
	installer: '张师傅',
	installerPhone: '12345678900',
	installTime: '2025-09-10 09:00',
	operationTime: '2025-09-12 09:00'
});

// 收益数据
const totalEarnings = ref('1000.00');

// 邀请奖励数据
const inviteRewards = ref({
	amount1: '400.00',
	count1: '2',
	amount2: '100.00',
	count2: '2'
});

// 使用统计数据
const usageStats = ref({
	todayAmount: '5.00',
	todayCount: '5',
	todayDegree: '150',
	totalAmount: '1000.00',
	totalCount: '100',
	totalDegree: '2000'
});

// 时间筛选
const timeFilter = ref('today');

// 充电记录数据
const chargingRecords = ref([
	{
		id: '皖A08754',
		duration: '1小时12分钟',
		degree: '50',
		payTime: '2025年8月11日 11:00:00',
		amount: '50.00'
	},
	{
		id: '皖A09999',
		duration: '1小时12分钟',
		degree: '50',
		payTime: '2025年8月11日 11:00:00',
		amount: '47.55'
	},
	{
		id: '皖A09999',
		duration: '1小时12分钟',
		degree: '50',
		payTime: '2025年8月11日 11:00:00',
		amount: '47.55'
	}
]);

// 切换标签页
const switchTab = (index) => {
	activeTab.value = index;
};

// 预约安装
const makeAppointment = () => {
	uni.showToast({
		title: '预约安装功能开发中',
		icon: 'none'
	});
};

// 开始正式运营
const startOperation = () => {
	uni.showToast({
		title: '正式运营功能开发中',
		icon: 'none'
	});
};

// 设置时间筛选
const setTimeFilter = (filter) => {
	timeFilter.value = filter;
	// 这里可以根据筛选条件更新充电记录数据
	console.log('时间筛选:', filter);
};

// 跳转到奖励列表页面
const goToRewardList = (type) => {
	uni.showToast({
		title: `跳转到${type === 'direct' ? '直接' : '间接'}奖励列表`,
		icon: 'none'
	});
	// 这里可以实现页面跳转逻辑
	// uni.navigateTo({
	//   url: `/pages/reward-list/index?type=${type}`
	// });
};

// 模拟不同状态，用于测试
// charging-pile-content
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.header {
	background-color: #fff;
	padding: 20rpx 30rpx;
}

.nav-tabs {
	display: flex;
	align-items: center;
}

.tab-item {
	padding: 20rpx 0;
	margin-right: 60rpx;
	font-size: 32rpx;
	color: #666;
	position: relative;
}

.tab-item.active {
	color: #080808;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4rpx;
	background-color: #1DCFB7;
	border-radius: 2rpx;
}

.charging-pile-content {
	/* padding: 30rpx; */
}

.status-card {
	
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
}
.status-card1 {
	
	border-radius: 20rpx;
	/* padding: 40rpx 30rpx; */
	padding-bottom: 99%;
}
.not-purchased {
	text-align: center;
}

.status-content {
	background: linear-gradient(to bottom, #fff, rgb(221, 247, 243));
	height: 250rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content:space-between;
}

.status-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 40rpx;
}
.status-title1 {
	font-size: 60rpx;
	font-weight: 530;
	color: #333;
	margin-bottom: 40rpx;
	letter-spacing: 4rpx;
}
.empty-area {
	height: 600rpx;
	
	border-radius: 16rpx;
	margin: 40rpx 0;
}

.action-section {
	padding: 0 30rpx;
}

.promotion-card {
	height:200rpx;
	border-radius:20rpx;
	padding: 40rpx 30rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content:space-between,
}

.promotion-image {
	width: 100%;
	height:200rpx;
	background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/banner_small.png');
	background-size: 100% 100%;
	background-repeat:no-repeat;
	background-position: center center;
	border-radius:20rpx;
	padding: 40rpx 30rpx;
	/* margin-bottom: 20rpx; */
	position: relative;
	display: flex;
	align-items: center;
	justify-content:space-between,
}

.promotion-content {
	flex: 1;
}

.promotion-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.promotion-subtitle {
	font-size: 28rpx;
	margin-bottom: 20rpx;
	display: block;
}

.benefit-text {
	display: flex;
	align-items: center;
	font-size: 26rpx;
}

.pile-icon {
	width: 80rpx;
	height: 80rpx;
	margin-left: 20rpx;
}

.status-header {
	height: 380rpx;
background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/bg_charge2(2).png');
background-size: 100% 100%;
background-repeat:no-repeat;
background-position: center center;
border-radius:20rpx;
padding: 40rpx 30rpx;
margin-bottom: 30rpx;
position: relative;
display: flex;
align-items: center;
justify-content:space-between,
}

.status-indicator {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	margin-right: 16rpx;
}

.status-indicator.orange {
	background-color: #FF9500;
}

.status-indicator.green {
	background-color: #34C759;
}

.pile-image {
	width: 80rpx;
	height: 80rpx;
	margin-left: auto;
}

.pile-info {
	margin-bottom: 30rpx;
}

.pile-location {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.pile-number {
	font-size: 26rpx;
	color: #999;
	display: block;
}

.appointment-info,
.installation-info,
.completion-info {
	background-color: #f8f9fa;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.info-label {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 20rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.info-text {
	font-size: 26rpx;
	color: #333;
}

.info-row {
	margin-bottom: 15rpx;
}

.info-row:last-child {
	margin-bottom: 0;
}

.usage-status {
	margin-top: 30rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #eee;
}

.usage-label {
	font-size: 26rpx;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.usage-value {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.action-btn {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	border: none;
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
}

.appointment-btn {
	background: linear-gradient(135deg, #1DCFB7, #12ada9);
}

.operation-btn {
	background: linear-gradient(135deg, #34C759, #28a745);
}

.earnings-content {
	padding: 30rpx;
}

/* 收益头部区域 */
.earnings-header {
	height: 380rpx;
	background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/bg_charge2(2).png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
    background-position: center center;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.earnings-main {
	flex: 1;
}

.earnings-amount {
	padding-left:30rpx;
	font-size: 55rpx;
	font-weight: 600;
	color: #1dcfb7;
	display: block;
	margin-bottom: 10rpx;
}

.earnings-label {
	padding-left:50rpx;
	font-size: 28rpx;
	color: black;
	font-weight: 500;
	display: block;
}

.charging-pile-bg {
	width: 120rpx;
	height: 120rpx;
}

/* 邀请奖励区域 */
.invite-rewards {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
}

.rewards-grid {
	border: 2rpx solid #1DCFB7;
	border-radius: 16rpx;
	padding: 10rpx;
	display: flex;
	gap: 10rpx;
}

.reward-item {
	display: flex;
	flex-direction: column;
	/* align-items: center;
	justify-content: center; */
	padding: 10rpx;
	flex: 1;
	/* border-right: 1rpx solid #f0f0f0; */
	/* text-align: center; */
}

.reward-item:last-child {
	border-right: none;
}

.reward-amount {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.reward-count {
	font-size: 24rpx;
	font-weight: normal;
	color: #666;
}

.reward-desc {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.reward-arrow {
	font-size: 28rpx;
	color: #1DCFB7;
	font-weight: bold;
}

.invite-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: 10rpx;
	vertical-align: middle;
}

/* 使用统计区域 */
.usage-stats {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.stats-grid {
	display: flex;
	margin-bottom: 30rpx;
}

.stat-item {
	flex: 1;
	text-align: center;
}

.stat-item:first-child {
	border-right: 1rpx solid #f0f0f0;
}

.stat-amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
	display: block;
}

/* 时间筛选 */
.time-filter {
	display: flex;
	margin-bottom: 30rpx;
}

.filter-item {
	padding: 16rpx 32rpx;
	margin-right: 20rpx;
	border-radius: 32rpx;
	font-size: 26rpx;
	color: #666;
	background-color: #f8f9fa;
}

.filter-item.active {
	background-color: #FF6B35;
	color: #fff;
}

/* 充电记录列表 */
.charging-records {
	margin-top: 20rpx;
}

.record-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.record-item:last-child {
	border-bottom: none;
}

.record-info {
	flex: 1;
}

.record-id {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.record-details {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 8rpx;
}

.record-time {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.record-amount {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}
</style>